<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="file">
	<br>
	<img src="" alt="">
	<script>
		// 配合服务器来实现上传头像的显示
		// 1. 点击上传按钮,上传图片
		// 2. 发送请求,携带上传的文件对象信息给服务器
		// 3. 服务器接收到请求会返回给前端一个url地址
		// 4. 基于服务器返回的地址实现的显示
		// ---------------你可以不依赖服务器实现一个上传头像的本地预览么? 
	  // 使用这个 方法 URL.createObjectURL(对象) 实现纯前端实现本地预览 兼容性 ie 10+
		const ipt = document.querySelector('input')
		const img = document.querySelector('img')
		ipt.addEventListener('change', (e)=>{
			console.dir(e.target.files[0]); // 上传的文件信息对象
			// 基于文件信息对象 使用URL.createObjectURL(对象) 得到一个临时url地址(临时路径) blob开头
			// 临时路径的生命周期 -  创建出来的临时路径地址和创建这个路径的页面窗口进行绑定, 创建路径的页面关闭了, 地址也就失效了
			const url = URL.createObjectURL(e.target.files[0])
			console.log(url);
			// 将返回的临时地址赋值给img的src属性
			img.src = url
		})
	</script>
</body>
</html>